<template>
  <div class="indent">
    <div class="search-wrap">
      <el-row :gutter="4" type="flex" justify="start">
        <el-col>
          <el-radio-group v-model="listQuery.radio">
            <el-radio-button label="全部"/>
            <el-radio-button label="最近七天"/>
          </el-radio-group>
          <el-date-picker
            v-model="listQuery.date"
            type="daterange"
            range-separator="|"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-cascader
            :options="options"
            v-model="listQuery.selected"
            placeholder="阶段名称"
            @change="handleChange"
          />
          <el-input v-model="listQuery.input" style="width:120px" placeholder="学员姓名"/>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-col>
      </el-row>
      <div class="table-wrap">
        <eltable
          :table-label="tableLabel"
          :table-data="tableData"
          :default-sort="{prop: 'id', order: 'descending'}"
        >
          <el-table-column slot="first" sortable label="序号" prop="id" align="center" min-width="5">
            <template slot-scope="scope">{{ scope.row.id }}</template>
          </el-table-column>
        </eltable>
      </div>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10,20, 30, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import Eltable from '@/components/Eltable'
export default {
  components: {
    Eltable
  },
  data() {
    return {
      listQuery: {
        radio: '全部',
        input: '',
        date: '',
        selected: []
      },
      currentPage: 1,
      pageSize: 10,
      total: 100,
      options: [
        {
          value: 'firstTerm',
          label: '第一学期',
          children: [
            {
              value: 'firstStep',
              label: '第一阶段'
            },
            {
              value: 'secondStep',
              label: '第二阶段'
            },
            {
              value: 'thirdStep',
              label: '第三阶段'
            }
          ]
        }
      ],
      tableLabel: [
        {
          label: '手机号码', prop: 'telephone', width: '10'
        },
        {
          label: '用户名', prop: 'username', width: '10'
        },
        {
          label: '订单时间', prop: 'indentTime', width: '15'
        },
        {
          label: '支付时间', prop: 'payTime', width: '15'
        },
        {
          label: '来源', prop: 'from', width: '10'
        },
        {
          label: '支付方式', prop: 'payWay', width: '10'
        },
        {
          label: '总金额', prop: 'total', width: '10'
        },
        {
          label: '已付金额', prop: 'payPrice', width: '10'
        }
      ],
      tableData: [
        {
          id: '1'
        }, {
          id: '2'
        }
      ]

    }
  },
  methods: {
    handleChange(value) { },
    handleSizeChange(val) {
      // console.log(val)
      // this.currentpage = 1
      // this.pagesize = val.value
    },
    handleCurrentChange(val) {
      // console.log(val)
      // this.currentpage = val.value
    }
  }
}
</script>

<style lang="scss">
.indent {
  .search-wrap {
    width: 100%;
    margin: 20px 0;
    .el-radio-group {
      vertical-align: top;
      .el-radio-button__inner {
        border: 1px solid #dcdfe6;
        margin-left: 4px;
      }
      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        box-shadow: 0px 0 0 0 #409eff;
      }
    }
  }
  .table-wrap {
    width: 100%;
  }
  .el-pagination {
    margin-top: 30px;
  }
}
</style>
